﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>UTSC Tutoring System </title>


<script src="prototype.lite.js" type="text/javascript"></script>

<script src="moo.fx.js" type="text/javascript"></script>

<script src="moo.fx.pack.js" type="text/javascript"></script>

<style type="text/css">
	#container
	{
	margin: 0 auto;
	width: 50%;
	}

	#header
	{

	padding: 20px;
	height: 80px;
	width: 62%;
	text-decoration::blink;
	text-align:center;
	text-indent:inherit;
	font-size:15px;
	font-weight:500;
	}
	
	#login
	{
	top:5px;
	float:right;
	}
	#utsclogo
	{
		float: left;
		margin: 0 auto;
		width: 65%;
		height: 22px;
		left: 0;
		}
	#header h1 { margin: 0; }

	#navigation
	{
	float: left;
	width: 100%;
	background-image:url("images/fabric-texture.jpg");
	font-size:16px;
	height:30%;
	}

	#navigation ul
	{
	margin: 0;
	padding: 0;
	}

	#navigation ul li
	{
	list-style-type: none;
	display: inline;
	}

	#navigation li a
	{
	display: block;
	float: left;
	padding: 5px 10px;
	color: #fff;
	text-decoration: none;
	border-right: 1px solid #fff;
	}

	#navigation li a:hover { background: #383; }

	#content-container1
	{
	float: left;
	width: 100%;
	background: #fff url(/wp-content/uploads/images/layout-three-liquid-background1.gif) repeat-y 20% 0;
	}

	#content-container2
	{
	float: left;
	width: 100%;
	background: url(/wp-content/uploads/images/layout-three-liquid-background2.gif) repeat-y 80% 0;			   
	}	

	#section-navigation
	{
	float: left;
	width: 16%;
	padding: 20px 0;
	margin: 0 2%;
	display: inline;
	height:20%;
	
	}

	#section-navigation ul
	{
	margin: 0;
	padding: 0;
	
	}

	#section-navigation ul li
	{
	margin: 0 0 1em;
	padding: 0;
	list-style-type: none;
	
	}

	#content
	{
	float: right;
	width: 78%;
	margin: 0 0 0 2%;
	height: 600px;
	font-size: 12px;	
	}
	#footer
	{
	clear: both;
	background: #ccc;
	text-align: right;
	padding: 20px;
	height: 1%;
	bottom: 0px;
	}
	
	body {
	font:12px Arial, Helvetica, sans-serif;
	color: #000;
}
#container {
	width: 100%;
}
H1 {
	font-size: 11px;
	margin: 0px;
	width: 200px;
	cursor: pointer;
	height: 22px;
	line-height: 20px;	
}
H1 a {
	display: block;
	padding-top: 1px;
	padding-right: 8px;
	padding-bottom: 0px;
	padding-left: 8px;	
	width: 200px;
	color: #000;
	height: 22px;
	text-decoration:blink;	
	moz-outline-style: none;
	background-image: url(images/title.gif);
	background-repeat: repeat-x;
}
.content{
	padding-left: 8px;
}


</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="utsclogo">
	  <h1><img src="images/Capture.PNG" width="472" height="127" /></div>
<div id="container">
	<div id ="login">
    	<form method ="post" action="">
        <p>
        	<label for="name">Username:</label>
            <input type="text" name="username"/>
        </p>
        <p>
        	<label for="pwd">Password:</label>
            <input type="password" name="pwd"/>
        </p>
        <p>
        	<input type="submit" id="submit" value="Login" name="submit"/>
        </p>
        </form>
	</div>
	<div id="navigation">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Search</a></li>
			<li><a href="#">Tutor</a></li>
			<li><a href="#">Student</a></li>
		</ul>
	</div>
<div id="content-container1">
		<div id="content-container2">
			<div id="section-navigation"> 
			  <H1 class="title"><A href="javascript:void(0)">Subject</a></H1>
		<div class="content">
		</div>
		<H1 class="title"><A href="javascript:void(0)">Computer Science</a></H1>
		<div class="content">
			<p>CSCA08</p>
			<p>CSCA48</p>
			<p>CSCA65</p>
			<p>CSCB07</p>
            <p>CSCB09</p>
            <p>CSCB36</p>
            <p>CSCB58</p>
            <p>CSCB63</p>
            <p>CSCC40</p>
		</div>
		<H1 class="title"><A href="javascript:void(0)">mathematic</a></H1>
		<div class="content">
		  <p>MATA30</p>
          <p>MATA23</p>
          <p>MATA37</p>
          <p>MATB41</p>
          <p>MATB42</p>
          <p>MATB24</p>
		</div>
		<H1 class="title"><a href="javascript:void(0)">statistics</a></H1>
		<div class="content">
			<p>STAB52</p>
            <p>STAB22</p>

		</div>
			</div>
		  <div id="content">
          <p>Tutor List</p>
				<table width="950" border="0">
				  <tr>
				    <th scope="col">Tutor Id</th>
				    <th scope="col">Name</th>
				    <th scope="col">subject</th>
				    <th scope="col">rate</th>
				    <th scope="col">availability</th>
			      </tr>
				  <tr>
				    <td>TA1</td>
				    <td>cs</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
			      </tr>
				  <tr>
				    <td>TA2</td>
				    <td>math</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
			      </tr>
				  <tr>
				    <td>TA3</td>
				    <td>b</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
			      </tr>
				  <tr>
				    <td>TA4</td>
				    <td>a</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
			      </tr>
				  <tr>
				    <td>TA5</td>
				    <td>c</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
			      </tr>
				  <tr>
				    <td>TA6</td>
				    <td>d</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
			      </tr>
				  <tr>
				    <td>TA7</td>
				    <td>e</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
			      </tr>
				  <tr>
				    <td>TA8</td>
				    <td>f</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
			      </tr>
				  <tr>
				    <td>TA9</td>
				    <td>g</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
			      </tr>
		    </table>
            <p>Student List</p>
            				<table width="950" border="0">
				  <tr>
				    <th scope="col">Student ID</th>
				    <th scope="col">Name</th>
				    <th scope="col">Subject</th>
				    <th scope="col">rate</th>
				    <th scope="col">availability</th>
			      </tr>
				  <tr>
				    <td>ST1</td>
				    <td>cs</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
			      </tr>
				  <tr>
				    <td>ST2</td>
				    <td>math</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
			      </tr>
				  <tr>
				    <td>ST3</td>
				    <td>b</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
			      </tr>
				  <tr>
				    <td>ST4</td>
				    <td>a</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
			      </tr>
				  <tr>
				    <td>ST5</td>
				    <td>c</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
			      </tr>
				  <tr>
				    <td>ST6</td>
				    <td>d</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
			      </tr>
				  <tr>
				    <td>ST7</td>
				    <td>e</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
			      </tr>
				  <tr>
				    <td>ST8</td>
				    <td>f</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
			      </tr>
				  <tr>
				    <td>ST9</td>
				    <td>g</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
				    <td>&nbsp;</td>
			      </tr>
		    </table>
				<h2>&nbsp;  </h2>
                </div>
			<div id="footer">
				Copyright © Group G, MicroTutoring. inc 2011
		  </div>
		</div>
  </div>
</div>
<script type="text/javascript">
		var contents = document.getElementsByClassName('content');
		var toggles = document.getElementsByClassName('title');
	
		var myAccordion = new fx.Accordion(
			toggles, contents, {opacity: true, duration: 400}
		);
		myAccordion.showThisHideOpen(contents[0]);
	</script>
</body>
</html>
